<template>
    <div class="full-name" v-if="show">sum:{{ sum }}</div>
    <button @click="addSum">点我加一</button>
    <button @click="setShow">显示/隐藏</button>
</template>

<script setup lang="ts" name="Person001">
    import { ref,onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

    let sum = ref(1)
    let show = ref(true)

    console.log('setup 已经执行');
    
    function addSum() {
        sum.value += 1
    }

    function setShow() {
        show.value = !show.value
    }

    onBeforeMount(()=>{
        console.log('onBeforeMount 已经执行');
        
    })
    onMounted(()=>{
        console.log('onMounted 已执行');
        
    })

    onBeforeUpdate(()=>{
        console.log('onBeforeUpdate 已执行');
        
    })

    onUpdated(()=>{
        console.log('onUpdated 已执行');
    })

    onBeforeUnmount(()=>{
        console.log('onBeforeUnmount 已执行-----');
    })
        
    onUnmounted(()=>{
        console.log('onUnmounted 已执行-------');
    })
</script>

<style scoped>
    .full-name{
        background-color: skyblue;
        font-size: medium;
        border-radius: 5%;
        
    }
    .v1{
        background-color: rgba(58, 206, 48, 0.381);
        font-size: medium;
    }
    
</style>
